
<template>
    <div>
        <navbar :select="type" class="navbarBox"></navbar>
        <div class="maxBox flexFST">
            <dplayer :dplayerData="dplayerData" class="dplayerBox" ref="dplayer"></dplayer>

            <!-- 评论 -->
            <div class="plunBox">
                <div class="title">评论</div>
                <div style="color: #fff; margin-top: 20px">全部评论{{ "(" + commentList.length + ")" }}</div>

                <div class="infinite-list" v-if="commentList.length > 0">
                    <div :key="index" style="margin-top: 20px" v-for="(item, index) in commentList">
                        <div class="flexFS">
                            <div class="headBoxImg">
                                <img :src="item.userInfo.avatar" style="width: 100%" />
                            </div>

                            <div>
                                <div class="titleName" style="color: #bdbdbd">{{ item.userInfo.name }}</div>
                            </div>
                        </div>
                        <!-- 正文 -->
                        <div class="dateText" style="margin-top: -10px">{{ item.content }}</div>

                        <div class="dateText" style="font-size: 12px; color: #c4c4c4; margin: 20rpx 0">{{ item.create_time }}</div>

                        <!-- 展开回复的评论 -->
                        <div style="margin-left: 50px" v-if="item.child_total > 0 && showReply == index">
                            <div :key="index2" style="margin-top: 20px" v-for="(item2, index2) in sonCommentList">
                                <div class="flexFS">
                                    <div class="headBoxImg">
                                        <img :src="item2.userInfo.avatar" style="width: 100%" />
                                    </div>

                                    <div>
                                        <div class="titleName" style="color: #bdbdbd">{{ item2.userInfo.name }}</div>
                                    </div>
                                </div>
                                <!-- 正文 -->
                                <div class="dateText" style="margin-top: -10px">{{ item2.content }}</div>

                                <div class="dateText" style="font-size: 12px; color: #c4c4c4; margin: 20rpx 0">{{ item2.create_time }}</div>
                            </div>
                        </div>
                        <!-- 收起回复 -->
                        <div @click="showReply = -1" class="reply hand" v-if="showReply == index">
                            <i class="el-icon-minus"></i>
                            收起
                            <i class="el-icon-arrow-up"></i>
                        </div>
                        <!-- 展开回复 -->
                        <div @click="sonCommentListFun(item.id, index)" class="reply hand" v-else>
                            <div v-if="item.child_total > 0">
                                <i class="el-icon-minus"></i>
                                <i class="el-icon-minus"></i>
                                展开{{ item.child_total }}条回复
                                <i class="el-icon-arrow-down"></i>
                            </div>
                        </div>
                    </div>

                    <div style="margin: 30px auto; width: 150px">
                        <el-button @click="more" round style="width: 150px; margin-bottom: 300px">点击加载更多评论</el-button>
                    </div>
                </div>
                <div style="text-align: center; margin-top: 50px; color: #fff" v-else>暂无更多评论~~~</div>
            </div>
        </div>
        <!-- 作品名 -->
        <div class="name">{{ name }}</div>
    </div>
</template>
 
<script>
import dplayer from '@/components/dplayer/dplayer'
import navbar from '@/components/navbar/navbar.vue'
export default {
    components: {
        dplayer,
        navbar,
    },
    data() {
        return {
            dplayerData: {
                style: 'width:100%;height:672px;position: absolute;bottom: 0;right: 0;',
            },
            info: { video: '视频链接', pic: '封面图链接' },
            page: 1,
            pageHF: 1,
            showReply: -1,
            name: '',
            type: -1,
            commentList: [
                // {
                //   content: "测试评论",
                //   create_time: "2023-08-24",
                //   userInfo: {
                //     id: 0,
                //     name: "今晚月亮不营业",
                //     avatar:
                //       "https://gd-hbimg.huaban.com/5f9fbf1eb4fd6e88dd348de3bb376b3782ba1b51d15ba-rSk8zA_fw240webp",
                //     subtitle: "string",
                //   },
                // }
            ],
            sonCommentList: [],
        }
    },
    created() {
        if (this.$route.query.id) {
            this.getWorksDetails()
            this.getComment()
        } else {
            //网络表演
            this.info.video = 'v3-weba.douyinvod.com/b88c776c9aaf687587e0224619bcd1ea/64e80f15/video/tos/cn/tos-cn-ve-15c001-alinc2/ocQElMHNeyhizNAkBFzPDdf5H7DZgACIKELEEA/?a=6383&ch=5&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=2372&bt=2372&cs=0&ds=3&ft=XzJ6BM06xxoupy.O2PN12lMg4-iGNbL8daQZU_40XI0GJNv7T&mime_type=video_mp4&qs=0&rc=ZzQzNTs6Z2c4NTs7NjZpOEBpajduPDU6ZjlsbTMzNGkzM0BiXjZgNGAwNi4xY19jMWNhYSMwMzUycjQwcTRgLS1kLWFzcw%3D%3D&btag=e00008000&dy_q=1692926199&l=20230825091638B84C6C14FB7108646F86'
        }
        console.log('  this.info.video ', this.info.video)
        setTimeout(() => {
            this.switchVideo()
        }, 500)
        if (this.$route.query.type == 'short') {
            this.type = 0
        } else if (this.$route.query.type == 'live') {
            this.type = 2
        } else {
            this.type = 1
        }
    },
    methods: {
        sonCommentListFun(id, index) {
            this.getCommentHF(id, index)
        },
        switchVideo() {
            this.$refs.dplayer.switchVideo(this.info)
        },

        //查询视频评论回复
        getCommentHF(parent, index) {
            let that = this
            let parameter = {
                creationid: this.$route.query.id, //作品ID
                page: that.pageHF,
                pageSize: 30,
                parent: parent,
            }
            that.apis.getComment(parameter).then((res) => {
                if (parent) {
                    //查询单挑评论的回复
                    that.sonCommentList = res.data
                    that.showReply = index
                } else {
                    //查询所有评论
                    if (that.page == 1) {
                        that.commentList = res.data
                        console.log('成功')
                    } else {
                        if (res.data.length == 0) {
                            this.$message({
                                message: '暂无更多消息',
                                type: 'warning',
                            })
                        }
                        //上拉加载
                        that.commentList = [...that.commentList, ...res.data]
                        that.loading = false
                    }
                }
            })
        },

        //查询视频评论
        getComment(index) {
            let that = this
            let parameter = {
                creationid: this.$route.query.id, //作品ID
                page: that.page,
                pageSize: 15,
            }
            that.apis.getComment(parameter).then((res) => {
                //查询所有评论
                if (that.page == 1) {
                    that.commentList = res.data
                    console.log('成功')
                } else {
                    if (res.data.length == 0) {
                        this.$message({
                            message: '暂无更多消息',
                            type: 'warning',
                        })
                    }
                    //上拉加载
                    that.commentList = [...that.commentList, ...res.data]
                    that.loading = false
                }
            })
        },

        //查询作品详情
        getWorksDetails(index) {
            let that = this
            let parameter = {
                id: this.$route.query.id, //作品ID
            }
            that.apis.getWorksDetails(parameter).then((res) => {
                that.info.video = res.data.media_urls[0]
                that.name = res.data.name
            })
        },

        //加载更多
        more() {
            console.log()
            this.page++
            this.getComment()
        },
    },
}
</script>
 
<style lang="scss" scoped>
.dplayerBox {
    width: 80%;
    height: 800px;
    overflow: hidden;
}

.plunBox {
    height: 800px;
    width: 450px;
    // background-color: rgb(5,15,16);
    //background-color: #161012;
    background-color: rgba(0, 0, 0, 0.5);
    // background: linear-gradient(to bottom right, #4b4d4d, #161012);
    margin-top: 25px;
    padding: 0 20px;
    overflow: auto;
    margin-right: 60px;
    position: relative;
    /* 使伪元素相对于body定位 */
    z-index: 1;
    background-attachment: fixed;
    /* 设置背景图片固定 */

    // 设置滚动条
    // 滚动条整体部分
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

.plunBox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://gd-hbimg.huaban.com/6307ee6f487cd986ca22d93935f7f6c61645a86c11244b-db68ki_fw658webp');
    filter: blur(300px);
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.title {
    text-align: center;
    padding: 15px 0;
    color: #fff;
    font-size: 18px;
    border-bottom: 1px solid #555;
}

.headBoxImg_img {
    border-radius: 3px;
    overflow: hidden;
}

.headBoxImg {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-right: 10px;
}

.titleName {
    font-size: 26px;
    margin-bottom: 20px;
}

.dateText {
    font-size: 14px;
    color: #ffffff;
    margin-left: 50px;
}

.titleName {
    color: #fff;
    font-size: 14px;
}

.maxBox {
    background-color: #050d0f;

    //background: radial-gradient(ellipse, #454745, #050d0f);
    height: 94.5vh;
    overflow: hidden;
    margin-top: 50px;
}

.name {
    position: absolute;
    color: #fff;
    top: 90px;
    left: 60px;
    font-size: 24px;
    z-index: 99;
}

.reply {
    color: #bdbdbd;
    font-size: 12px;
    margin-left: 50px;
    margin-top: 10px;
}
</style>